<template>
  <div>
    <!-- 头部tab -->
    <div class="top_tab">
      <div class="left" @click="back()">
        <img  src="../assets/order_center/shangs.png">
      </div>
      <span>申请还款</span>
      <div class="right" @click="isOk()">
		  下一步
      </div>
    </div>
		<div class="kong"></div>
    <div class="list">
			<div class="beijinse" @click="onJump()">
				<div>
					<img src="../assets/bankcar/ai.png">
				</div>
				<div class="kahaome">
					<p>{{this.open_bank}}</p>
					<p v-if="this.id_bank_card">{{'尾号 '+this.id_bank_card.substring(this.id_bank_card.length-4)+' 储蓄卡'}}</p>
				</div>
				<i  class="ddddd el-icon-arrow-right"></i>
			</div>
			<div class="boxt">
				<div class="info">
					<span>金&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;额：</span><input type="text" v-model="price" placeholder="请输入提现金额">
				</div>
			</div>
			<!-- <div class="boxt">
				<div class="info">
					<span>户&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：</span><input type="text" v-model="username" placeholder="请输入您的姓名">
				</div>
			</div> -->
			<!-- <div class="boxt">
				<div class="info">
					<span>银行卡号：</span><input type="text" v-model="id_bank_card" placeholder="请输入银行卡号">
				</div>
			</div> -->
			<!-- <div class="boxt">
				<div class="info">
					<span>开户支行：</span><input type="text" v-model="open_bank" placeholder="请输入开户支行">
				</div>
			</div> -->
			<div class="boxt">
				<div class="info">
					<span>手&nbsp;&nbsp;机&nbsp;&nbsp;号：</span><input type="text" v-model="phone" placeholder="请输入手机号">
				</div>
			</div>
			<div class="boxt">
				<div class="info">
					<span>安全密码：</span><input type="password" v-model="safepassword" placeholder="请输入安全密码">
				</div>
			</div>
			<!-- <div class="btn">
				<button class="affirm" @click="isOk()">确认</button>
				<button class="cancel" @click="back()">取消</button>
			</div> -->
		</div>
		<!-- 解债师资格 -->
		<div class="center">
			<div class="bar">
				<div class="title">
					<div class="box">
						<div class="f"></div>
						<span>提现规则</span>
						<div class="f"></div>
					</div>
				</div>
				<div class="tt">
					<div class="txt">
						<span>1.必须是VIP会员</span>
					</div>
					<div class="txt">
						<span>2.</span>
						<span>每次提现金额必须为 1000 变现鸿包的整数倍，最低为1000变现鸿包</span>
					</div>
					<div class="txt">
						<span>3.</span>
						<span>每次提现平台收取 15%手续费,并返还5%消费鸿包</span>
					</div>
					<div class="txt">
						<span>4.</span>
						<span>每次提现申请次日开始，三个工作日内到账</span>
					</div>
					<div class="txt">
						<span>5.</span>
						<span>提现已到账，才能申请下一笔提现</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
  name: 'put_in',
  data () {
	return {
		price:'',
		username:'',
		id_bank_card:'',
		open_bank:'',
		phone:'',
		safepassword:'',
		hcuen:[],
    }
  },
  methods:{
    back: function() {
      this.$router.go(-1);
	},
	onJump(){ 
	  let self = this;
      let url = "/api/bank_card/index";
			self.httpPost(url,{user_id:this.myid,token:this.token,p:1,psize:999},function(res) {
				if (res.code == 200) {
					if(res.data == 'null'||res.data == null){
						 self.$router.push("addcar");
						console.log(122)
					}else{
						 self.$router.push("bankcar"); 
					}
				}
      })
	},
	isOk(){
		let self = this; 
	
		// if(!this.username){
       	// 	 this.$dialog.toast({mes:'请输入您的姓名'});
        // return
		// }
		if(!this.id_bank_card){
       		 this.$dialog.toast({mes:'请选择提现的银行卡'});
        return
		}
		if(!this.price){
       		 this.$dialog.toast({mes:'请输入提现金额'});
        return
		}
		// if(!this.open_bank){
       	// 	 this.$dialog.toast({mes:'请输入开户支行'});
        // return
		// }
		if(!this.phone||this.phone.length!=11){
       		 this.$dialog.toast({mes:'请输入正确手机号'});
        return
		}
		if(!this.safepassword){
       		 this.$dialog.toast({mes:'请输入6位安全密码'});
        return
		}
		let url ="/api/selloffcheck";
		self.httpPost(url,
		{
		token:this.token,
		user_id:this.myid,
		price:this.price,

		username:this.username,
		id_bank_card:this.id_bank_card,
		open_bank:this.open_bank,
		phone:this.phone,
		safepassword:this.safepassword
		},function(res) {
		if (res.code === 200) {
			self.$dialog.toast({mes:res.msg});
			setTimeout(() => {
				self.$router.go(-1);
			}, 1000);
        }else{
     	   self.$dialog.toast({mes:res.msg});
		}
	   })
	},

  },
	created(){
   		document.title = "申请还款";
   		this.token = localStorage.getItem('mytoken');
		this.myid = localStorage.getItem('myid'); 
		// this.personalClick();
		if(sessionStorage.getItem('xm')||sessionStorage.getItem('zh')||sessionStorage.getItem('yhk')){
			this.username = sessionStorage.getItem('xm');
			this.open_bank = sessionStorage.getItem('zh');
			this.id_bank_card = sessionStorage.getItem('yhk');
		}
		 
		 
  }

}
</script>


<style scoped>
.ddddd{
	position: absolute;
	right: .4rem;
	color: #fff;
	font-size: .45rem;
}
.beijinse{
	border-radius: 5px;
    background: -webkit-gradient(linear,left top, right top,from(#fe8973),to(#fa565f));
    background: linear-gradient(to right,#fe8973,#fa565f);
	height: 1.5rem;
	display: flex;
	align-items: center; 
	padding-left: .2rem;
}
.beijinse img{
	width: .65rem;
}
.kahaome{
	padding-left: .2rem;
	color: #fff;
	font-size: .25rem;
}
.kahaome p{
	margin-bottom: .05rem;
}
.top_tab{
  width:100%;
  padding:.2rem .3rem;
  background: #FFF;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: .01rem .01rem .06rem #ddd;
  margin-bottom: .03rem;
  position: fixed;
}
.kong{
	width:100%;
	height:1rem;
}
.top_tab span{
  color:#333;
  font-size: .36rem;
}
.top_tab .right{
	width: 1rem;
	display: flex;
	justify-content: space-between;
}
.top_tab  img{
  width:.4rem;
}
.list{
	width:100%;
	padding: 0 .3rem;
	background: #FFF;
}
.list .boxt{
	width:100%;
	height:1rem;
	background: #FFF;
	display: flex;
	align-items: center;
	
}
.list .boxt .info{
	width:100%;
	height:100%;
	border-bottom: 1px solid #eee;
	display: flex;
	align-items: center;
}

.list .boxt .info span{
	font-size: .28rem;
	color:#707070;
}
.boxt span{
	font-size: .28rem;
	color:#333;
}
.boxt input{
	border:none;
	flex: 1;
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 
	color: #9e9e9e; 
	margin-left: .2rem;
} 
input:-moz-placeholder, textarea:-moz-placeholder { 
	color: #9e9e9e;
	margin-left: .2rem; 
} 
input::-moz-placeholder, textarea::-moz-placeholder { 
	color: #9e9e9e;
	margin-left: .2rem; 
} 
input:-ms-input-placeholder, textarea:-ms-input-placeholder { 
	color: #9e9e9e; 
	margin-left: .2rem;
} 
.btn{
	width:100%;
	display: flex;
	justify-content: center;
	padding: .2rem .2rem;
	margin-top: .2rem;
}
.btn .affirm{
	width: 1.18rem;
	height:.60rem;
	background: #e63f3f;
	border: none;
	border-radius: 5px;
	font-size: .28rem;
	color:#FFF;
}
.btn .cancel{
	width: 1.18rem;
	height:.60rem;
	background: #e7e6e9;
	border: none;
	border-radius: 5px;
	font-size: .28rem;
	color:#adadad;
	margin-left: .5rem;
}
.center{
	width:100%;
	background: #FFF;
	padding: .2rem .65rem;
	display: flex;
	justify-content: center;
}
.center .bar{
	width:100%;
	height:4.7rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	border:1px solid #d2d2d2;
	border-radius: 20px;
	padding: .3rem .1rem;;
}
.center .bar .title{
	width:100%;
	display: flex;
	justify-content: center;
}
.center .bar .title .box{
	width:1.93rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.center .bar .title .box .f{
	width:.1rem;
	height:.1rem;
	background:#ee8834;
}
.center .bar .title .box span{
	font-size: .30rem;
	color:#ee8834;
}
.center .bar .tt{
	width:94%;
	margin-top: .2rem;
	display: flex;
	flex-direction: column;
}
.center .bar  .txt{
	width:100%;
	display: flex;
}
.center .bar  .txt span{
	font-size: .24rem;
	color:#a0a0a0;
	line-height: .4rem;
}
</style>



